<!--排行榜-->
<template>
  <div class="Rank">
    <div class="Rank_head">
      <van-icon name="arrow-left" @click="back" />
      <h3>排行榜</h3>
      <p>
        <van-icon name="ellipsis" />
        <van-icon name="award-o" />
      </p>
    </div>

    <div class="Rank_main">
      <div class="franchise">
        <dl v-for="(item, index) in newList" :key="index">
          <dt><img :src="item.userImg" alt="" /></dt>
          <dd>
            <p>{{ item.name }}</p>
          </dd>
        </dl>
      </div>
      <div class="dlInner">
        <dl v-for="(item, index) in ranklist" :key="index">
          <dt><img :src="item.userImg" alt="" /></dt>
          <dd>
            <p>{{ item.name }}</p>
            <p>{{ item.text }}</p>
          </dd>
          <dd>
            <van-icon name="chat-o" />
            <van-icon name="phone-o" />
          </dd>
        </dl>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "../../util/axios";
export default {
  data() {
    return {
      ranklist: [],
      newList: [],
    };
  },
  methods: {
    //返回上一页
    back() {
      history.go(-1);
    },

    Rank() {
      axios.get("/getRanking").then((res) => {
        console.log(res);
        this.ranklist = res.data.data;
        this.newList = res.data.data.splice(0, 3);
        console.log(this.newList);
      });
    },
  },
  created() {
    this.Rank();
  },
};
</script>

<style scoped lang='scss'>
.Rank {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.Rank_head {
  width: 100%;
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 8px;
  background: #2693fa;
  color: #fff;
  position: sticky;
  top: 0;
  z-index: 999;
}
.Rank_head p {
  border: 1px solid #e6e6e6;
  border-radius: 40px;
}
.Rank_head p .van-icon {
  padding: 4px 10px;
}
.Rank_main {
  flex: 1;
  overflow-y: scroll;

  .dlInner {
    width: 100%;
    height: 100%;
    padding: 0 10px;
  }
  .franchise {
    width: 100%;
    height: 350px;
    background: rgb(255, 78, 78);
    display: flex;
    align-items: center;
    justify-content: space-around;
    dl {
      width: 30%;
      height: 100px;
      margin: 0 auto;
      text-align: center;
      background: white;
      padding: 15px 0;
      border-radius: 10px;
      dt {
        img {
          width: 60px;
          height: 60px;
        }
      }
      dd {
        width: 100%;
        p {
          width: 100%;
        }
      }
    }
  }
}
.franchise dl:nth-child(2) {
  width: 35%;
  background: white;
  height: 130px;
}
.dlInner dl {
  width: 100%;
  height: 80px;
  display: flex;
  border-bottom: 1px solid #e6e6e6;

  align-items: center;
}
.dlInner dl dt {
  width: 15%;
  height: 60px;
}
.dlInner dl dt img {
  width: 100%;
  height: 100%;
  border: 1px solid #e6e6e6;
  border-radius: 50%;
}
.dlInner dl dd:nth-child(2) {
  padding-left: 10px;
  padding-right: 180px;
}
.dlInner dl dd:nth-child(3) i {
  margin: 0 5px;
  background: rgb(243, 193, 219);
  width: 30px;
  height: 30px;
  text-align: center;
  line-height: 30px;
  border-radius: 50%;
  color: red;
}
</style>